<template>
  <div class="experiment-box">
    <el-card class="tabs-card">
      <el-tabs v-model="activeName" class="custom-tabs" @tab-click="commEvent.tabClick">
        <el-tab-pane label="待完成" name="first">
          <template #label>
            <span class="custom-tab-label">
              <i class="iconfont icon-clock"></i>
              待完成
            </span>
          </template>
        </el-tab-pane>
        <el-tab-pane label="已结束" name="second">
          <template #label>
            <span class="custom-tab-label">
              <i class="iconfont icon-check"></i>
              已结束
            </span>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <div class="mt20">
      <keep-alive>
        <component :is="activeComponent" />
      </keep-alive>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, shallowRef } from "vue"
import WaitExperiment from "./components/WaitExperiment.vue"
import CompleteExperiment from "./components/CompleteExperiment.vue"
import { TabsPaneContext } from "element-plus"
// 参数
const activeName = ref<string>("first") // 激活分页信息
const activeComponent = shallowRef(WaitExperiment)
// 事件
const commEvent = {
  // tab页点击
  tabClick: (pane: TabsPaneContext) => {
    const { props } = pane
    if (props.name === "first") {
      activeComponent.value = WaitExperiment
    } else {
      activeComponent.value = CompleteExperiment
    }
  }
}
</script>

<style lang="scss" scoped>
.experiment-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  .tabs-card {
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 8%);
    transition: all 0.3s;
    &:hover {
      box-shadow: 0 4px 16px 0 rgb(0 0 0 / 12%);
    }
    :deep(.el-card__body) {
      padding: 0 24px 0 0;
    }
  }
  .custom-tabs {
    :deep(.el-tabs__header) {
      margin-bottom: 0;
      border-bottom: 2px solid #f0f0f0;
    }
    :deep(.el-tabs__nav-wrap::after) {
      display: none;
    }
    :deep(.el-tabs__nav) {
      height: auto;
    }
    :deep(.el-tabs__item) {
      height: 60px;
      padding: 0 24px;
      font-size: 15px;
      font-weight: 500;
      line-height: 60px;
      color: #606266;
      transition: all 0.3s;
      &:hover {
        color: var(--el-color-primary);

        // background-color: rgba(64, 158, 255, 0.05);
      }
      &.is-active {
        font-weight: 600;
        color: var(--el-color-primary);
      }
    }
    :deep(.el-tabs__active-bar) {
      height: 3px;
      background: linear-gradient(90deg, var(--el-color-primary), var(--el-color-primary-light-3));
      border-radius: 2px 2px 0 0;
    }
  }
  .custom-tab-label {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    i {
      font-size: 16px;
      transition: transform 0.3s;
    }
    &:hover i {
      transform: scale(1.1);
    }
  }
  .mt20 {
    margin-top: 20px;
  }
}
</style>
